<template>
    <div class="warp-2" style="height: 100%;">
            <navbar :title="$t('set_privacy')">
            <template #right>
                <span style="position: absolute;right: 20px" slot="right" class="write-btn-right head-right font-size15" v-if="(isExhibition == false)">{{ $t("save") }}</span><!--保存-->
                <span style="position: absolute;right: 20px" slot="right" class="write-btn-right head-right font-size15 cur" v-if="(isExhibition == true)" v-debounce="() => submit()">{{ $t("save") }}</span><!--保存-->
            </template>
        </navbar>
            <div>
                <div class="tabbar-no-icon" style="margin: 106px 0">
                    <ul>
                        <li>
                            <div @click="selectTypeTips(snsSetting.setMyFiles, 'setMyFiles')">{{ $t("personal_ls_my_file") }}<!--个人资料-->
                                <i class="arrow-right"></i>
                                <span style="float: right;color: #999999;">{{selectText[snsSetting.setMyFiles]}}</span>
                            </div>
                        </li>
                        <li>
                            <div @click="selectTypeTips(snsSetting.setMyFans, 'setMyFans')">{{ $t("personal_ls_fans") }}<!--粉丝-->
                                <i class="arrow-right"></i>
                                <span style="float: right;color: #999999;">{{selectText[snsSetting.setMyFans]}}</span>
                            </div>
                        </li>
                      <li>
                        <div @click="selectTypeTips(snsSetting.setMyFollow, 'setMyFollow')">{{ $t("personal_ls_sns_attention") }}<!--关注-->
                          <i class="arrow-right"></i>
                          <span style="float: right;color: #999999;">{{selectText[snsSetting.setMyFollow]}}</span>
                        </div>
                      </li>
                        <li>
                            <div @click="selectTypeTips(snsSetting.setMyLearningRecord, 'setMyLearningRecord')">{{ $t("personal_my_data") }}<!--我的数据-->
                                <i class="arrow-right"></i>
                                <span style="float: right;color: #999999;">{{selectText[snsSetting.setMyLearningRecord]}}</span>
                            </div>
                        </li>
                      <li>
                        <div @click="selectTypeTips(snsSetting.setMyLearningSituation, 'setMyLearningSituation')">{{ $t("learning_history_my_studies") }}<!--我的学习-->
                          <i class="arrow-right"></i>
                          <span style="float: right;color: #999999;">{{selectText[snsSetting.setMyLearningSituation]}}</span>
                        </div>
                      </li>
                      <li>
                        <div @click="selectTypeTips(snsSetting.setShare, 'setShare')">{{ $t("knowledge_share") }}<!--我的分享-->
                          <i class="arrow-right"></i>
                          <span style="float: right;color: #999999;">{{selectText[snsSetting.setShare]}}</span>
                        </div>
                      </li>
                    </ul>
                </div>
<!--                <div class="tabbar-no-icon" style="margin: 40px 0">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_my_learning_record, 's_set_my_learning_record')">{{ $t("personal_learning_record") }}&lt;!&ndash;学习记录&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_my_learning_record]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_my_learning_situation, 's_set_my_learning_situation')">{{ $t("set_privacy_learning_situation") }}&lt;!&ndash;学习概况&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_my_learning_situation]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tabbar-no-icon privacy-margin">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_my_credit, 's_set_my_credit')">-->
<!--                                {{ $t("personal_activity_credits") }}&lt;!&ndash;总积分&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_my_credit]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tabbar-no-icon privacy-margin">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_group, 's_set_group')">-->
<!--                                {{ $t("personal_group_my") }}&lt;!&ndash;我的群组&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_group]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tabbar-no-icon privacy-margin">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_my_files, 's_set_my_files')">{{ $t("set_privacy_my_files") }}&lt;!&ndash;我的档案&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_my_files]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="tabbar-no-icon privacy-margin">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <div @click="selectTypeTips(snsSetting.s_set_my_collection, 's_set_my_collection')">{{ $t("personal_my_collection") }}&lt;!&ndash;我的收藏&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                                <span style="float: right;color: #999999;">{{selectText[snsSetting.s_set_my_collection]}}</span>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
        <div class="selectPopup" v-if="isSelectType">
            <div class="selectPopup-body">
                <div class="electPopup-title">
                    <div class="close-box clearfix"><i class="close-icon-02" @click="isSelectType = false"></i></div>
                    <div>{{selectTypeName[selectName]}}</div>
                </div>
                <ul>
                    <li @click="selectedType(0)">
                        <div class="select-radio">
                            <input v-model="selectType" id="1" type="radio" value="0" hidden>
                            <span></span>
                        </div>
                        <label for="1">
                            <span>{{ $t("set_privacy_public") }}</span><!--公开-->
                            <span>{{ $t("set_privacy_all_see") }}</span><!--所有人可见-->
                        </label>
                    </li>
                    <li @click="selectedType(2)">
                        <div class="select-radio">
                            <input v-model="selectType" id="2" type="radio" value="2" hidden>
                            <span></span>
                        </div>
                        <label for="2">
                            <span>{{ $t("set_privacy_Private") }}</span><!--私密-->
                            <span>{{ $t("set_privacy_all_not_see") }}</span><!--仅自己可见-->
                        </label>
                    </li>
                    <li @click="selectedType(1)">
                        <div class="select-radio">
                            <input v-model="selectType" id="3" type="radio" value="1" hidden>
                            <span></span>
                        </div>
                        <label for="3">
                            <span>{{ $t("set_privacy_partially_visible") }}</span><!--部分可见-->
                            <span>{{ $t("set_privacy_my_attention_see") }}</span><!--我关注的人可见-->
                        </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="saving-box" v-if="savingShowBox">
            <p>
                <van-loading type="spinner" size="24" />
            </p>
            <p>{{ $t("saveing") }}</p><!--保存中...-->
        </div>
    </div>
</template>

<script>
import {Toast, Loading} from 'vant';

export default {
    name: 'SetPrivacy',
    components: {Toast, Loading},
    data() {
        return {
            selectType: '',
            snsSetting: {
                setMyFiles: 0,
                setMyFollow: 0,
                setMyLearningRecord: 0,
                setMyLearningSituation: 0,
                setShare: 0,
                setMyFans: 0
            },
            isSelectType: false,
            selectText: [this.$t('set_privacy_public'), this.$t('set_privacy_partially_visible'), this.$t('set_privacy_Private')], //公开，私密，部分可见
            selectTypeName: {
                setMyFollow: this.$t('set_privacy_see_I_care_about'), //允许谁可以看到我关注的人？
                setMyFans: this.$t('set_privacy_see_care_about_me'), //允许谁可以看到关注我的人？
                setMyLearningRecord: this.$t('set_privacy_see_my_learning_record'), //允许谁可以看到我的学习记录？
                setMyLearningSituation: this.$t('set_privacy_see_my_learning_situation'), //允许谁可以看到我的学习概况？
                setMyFiles: this.$t('set_privacy_see_my_file'), //允许谁可以看到我的档案？
                setShare: this.$t('set_privacy_see_my_collection') //允许谁可以看到我的收藏？
            },
            savingShowBox: false,
            isExhibition: false,
            groupNum: null,
            followNum: null,
            fansNum: null,
            likeNum: null,
            creditNum: null,
            exchangeNum: null,
            recordNum: null,
            situationNum: null,
            filesNum: null,
            setShare: null,
            /**--------------------**/
            freshDeta: {} //设置的隐私数据
        };
    },
    methods: {
        selectTypeTips(value, type) {
            this.isSelectType = true;
            this.selectType = value;
            this.selectName = type;
        },
        selectedType(value) {
            this.isSelectType = false;
            this.$set(this.snsSetting, this.selectName, value);
        },
        submit() {
            /*eslint-disable camelcase*/
            let {setMyFans, setMyFollow, setMyFiles, setMyLearningRecord, setMyLearningSituation, setShare} = this.snsSetting;
            this.$axios({
                method: 'PUT',
                url: `/app/api/trainee/my/update-secret`,
                data: {
                    setMyFans,
                    setMyFiles,
                    setMyFollow,
                    setMyLearningRecord,
                    setMyLearningSituation,
                    setShare
                }
            }).then(res => {
                this.savingShowBox = true;
                setTimeout(() => {
                    this.savingShowBox = false;
                    Toast(this.$t('successfully_modified'));
                }, 1000);
                setTimeout(() => {
                    this.$router.go(-1);
                }, 4000);
            });
        },
        getFreshDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/secret-detail`
            }).then(res => {
                this.snsSetting = res.data;
                this.followNum = this.snsSetting.setMyFollow;
                this.fansNum = this.snsSetting.setMyFans;
                this.recordNum = this.snsSetting.setMyLearningRecord;
                this.situationNum = this.snsSetting.setMyLearningSituation;
                this.filesNum = this.snsSetting.setMyFiles;
                this.setShare = this.snsSetting.setShare;
            });
        }
    },
    mounted() {
        // this.$axios({
        //     method: 'GET',
        //     url: '/app/personal/personalPrivacySet/getSnsSetting/' + window.localStorage.getItem('loginUser')
        // }).then(res => {
        //     if (res.data.snsSetting) {
        //         this.snsSetting = res.data.snsSetting;
        //         this.followNum = res.data.snsSetting.s_set_my_follow;
        //         this.groupNum = res.data.snsSetting.s_set_group;
        //         this.likeNum = res.data.snsSetting.s_set_like;
        //         this.fansNum = res.data.snsSetting.s_set_my_fans;
        //         this.exchangeNum = res.data.snsSetting.s_set_my_credit_exchange;
        //         this.recordNum = res.data.snsSetting.s_set_my_learning_record;
        //         this.situationNum = res.data.snsSetting.s_set_my_learning_situation;
        //         this.creditNum = res.data.snsSetting.s_set_my_credit;
        //         this.filesNum = res.data.snsSetting.s_set_my_files;
        //         this.collectionNum = res.data.snsSetting.s_set_my_collection;
        //     }
        // });
        //新版我的隐私
        this.getFreshDetail();
    },
    beforeUpdate() {
        if (this.followNum !== this.snsSetting.setMyFollow ||
            this.fansNum !== this.snsSetting.setMyFans ||
            this.recordNum !== this.snsSetting.setMyLearningRecord ||
            this.situationNum !== this.snsSetting.setMyLearningSituation ||
            this.filesNum !== this.snsSetting.setMyFiles ||
            this.setShare !== this.snsSetting.setShare) {
                this.isExhibition = true;
        } else {
            this.isExhibition = false;
        }
    }
};
</script>

<style scoped lang="less">
    .privacy-margin{
        margin-top: 15px;
        div{
            border: none;
        }
    }
    .selectPopup .selectPopup-body ul li span:first-child {
    font-size: 16px;
    margin-bottom: 3px;
    }
</style>
